<template>
    <div class="container container--footer full-width">
        <button class="btn btn--primary btn--top js--top" @click='backToTop'>Back to Top</button>
        <div class="region region--full">
            <div class="column column--full">
                <div class="group group--footer-info">
                    <div class="logo">
                        <a href="#" title="Sinopoly Watch"></a>
                    </div>
                    <p class='compy'>a Dow Jones company</p>
                    <div class="element element--text">
                        <p class="copyright">Copyright © 2024 Sinopoly Watch, Inc. All rights reserved.</p>
                        <p class="group group--links">
                            <router-link to='' class='link'>Terms of Use </router-link>
                            <span class="flag--updated">UPDATED</span><span class="bar">|</span>
                            <router-link to='' class='link'>Privacy Notice </router-link>
                            <span class="bar">|</span>
                            <router-link to='' class='link'>cookie Notice </router-link>
                            <span class="j-hidden" id="manage-cookies"> </span>.
                        </p>
                        <div class="group group--links"><router-link class="gdpr"
                                style="display: none;"></router-link><router-link class="usp"
                                style="display: none;"></router-link><router-link class="usp"
                                style="display: none;"></router-link></div>
                    </div>
                    <ul class="list list-img">
                        <li class="img-item">
                            <router-link to='' class='icons icon--facebook'><span
                                    class="screen-reader-text">Facebook</span></router-link>
                        </li>
                        <li class="img-item">
                            <router-link to='' class='icons icon--twitter'><span
                                    class="screen-reader-text">Twitter</span>
                            </router-link>
                        </li>
                        <li class="img-item">
                            <router-link to='' class='icons icon--linkedin'>
                                <span class="screen-reader-text">LinkedIn</span>
                            </router-link>
                        </li>
                        <li class="img-item">
                            <router-link to=''>
                                <img class="app-wh" alt="Download from the App Store" src="../../assets/app-store.svg">
                            </router-link>
                            <router-link to=''>
                                <img class="app-wh" alt="Download from the Google Play Store"
                                    src="../../assets/google-play.png">
                            </router-link>
                        </li>
                    </ul>
                </div>
                <ul class="list list--footer">
                    <li class="footer__heading">
                        <h3 class="label">Sinopoly Watch</h3>
                    </li>
                    <li class="footer__item"><router-link to='' class='words'>Customer Center</router-link></li>
                    <li class="footer__item"><router-link to='' class='words'>Contact Us</router-link></li>
                    <li class="footer__item"><router-link to='' class='words'>Newsroom Roster</router-link></li>
                    <li class="footer__item"><router-link to='' class='words'>irtual Stock Exchange</router-link></li>
                    <li class="footer__item"><router-link to='' class='words'>Sinopoly Watch Guides</router-link></li>
                    <li class="footer__item"><router-link to='' class='words'>Copyright Policy</router-link></li>
                    <li class="footer__item"><router-link to='' class='words'>nage Notifications</router-link></li>
                    <li class="footer__item"><router-link to='' class='words'>Cancel My Subscription</router-link></li>
                </ul>
                <ul class="list list--footer">
                    <li class="footer__heading">
                        <h3 class="label">Company</h3>
                    </li>
                    <li class="footer__item"><router-link to='' class='words'>Dow Jones</router-link></li>
                    <li class="footer__item"><router-link to='' class='words'>Code of Conduct</router-link></li>
                    <li class="footer__item"><router-link to='' class='words'>Corrections</router-link></li>
                    <li class="footer__item"><router-link to='' class='words'>Reprints &amp; Licensing</router-link>
                    </li>
                    <li class="footer__item"><router-link to='' class='words'>Digital Self Service</router-link></li>
                    <li class="footer__item"><router-link to='' class='words'>Your Ad Choices</router-link></li>
                    <li class="footer__item"><router-link to='' class='words'>Corporate Subscriptions</router-link></li>
                    <li class="footer__item"><router-link to='' class='words'>Accessibility</router-link></li>
                </ul>
                <ul class="list list--footer">
                    <li class="footer__heading">
                        <h3 class="label">Dow Jones Network</h3>
                    </li>
                    <li class="footer__item"><router-link to='' class='words'>The Wall Street Journal</router-link></li>
                    <li class="footer__item"><router-link to='' class='words'>Barron's</router-link></li>
                    <li class="footer__item"><router-link to='' class='words'>Investor's Business Daily</router-link>
                    </li>
                    <li class="footer__item"><router-link to='' class='words'>BigCharts</router-link></li>
                    <li class="footer__item"><router-link to='' class='words'>Financial News London</router-link></li>
                    <li class="footer__item"><router-link to='' class='words'>realtor.com</router-link></li>
                    <li class="footer__item"><router-link to='' class='words'>Mansion Global</router-link></li>
                </ul>
                <div class="element element--legal">
                    <p class="legal">
                        Intraday Data provided by
                        <router-link class="factset" href="https://www.factset.com/" rel="nofollow"
                            target="_blank">FACTSET</router-link> and subject to <router-link>terms of
                            use</router-link>.
                        Historical and current end-of-day data provided by
                        <router-link class="factset" href="https://www.factset.com/" rel="nofollow"
                            target="_blank">FACTSET</router-link>.
                        All quotes are in local exchange time.
                        Real-time last sale data for U.S. stock quotes reflect trades reported through Nasdaq only.
                        Intraday data delayed at least 15 minutes or per exchange requirements.
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang='ts' setup>
// 跳转回到顶部
const backToTop = () => {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
}
</script>
<style lang='scss' scoped>
.container--footer {
    position: relative;
    background: #2e2e2e;
    margin-top: 20px;
    padding: 30px 0 60px !important
}

.logo a {
    background: url("../../assets/logo.png") no-repeat center center;
    width: 254px;
    height: 62px;
    display: inline-block;
    background-size: contain;
}

.compy {
    color: #fff;
    font-size: 12px;
    text-indent: 18px;
    margin-top: -16px;
    margin-bottom: 10px;
}

.group--links .link {
    color: #03a9e9;
    text-decoration: none;
    white-space: nowrap;
}

.group--links .link:hover {
    border-bottom: 1px solid #03a9e9;
}

.list-img {
    display: flex;
    flex-flow: row nowrap;
    margin-top: 20px;

    .img-item {
        margin-right: 3px;
        list-style-type: none;
        display: flex;
    }

    .icons {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        color: #fff;
        transition: all .2s ease-in-out;
        font-size: 1rem;
    }

    .icon--facebook {
        background: #3b5998;
    }

    .icon--facebook:before {
        content: "\e931";
    }

    .screen-reader-text {
        clip: rect(0 0 0 0);
        overflow: hidden;
        position: absolute;
        color: #fff;
        height: 1px;
        width: 1px;
    }

    .icon--twitter {
        background: #55acee;
    }

    .icon--twitter:hover {
        background: #2795e9;
    }

    .icon--facebook:hover {
        background: #2d4373
    }

    .icon--twitter:before {
        content: "\e928";
    }

    .icon--linkedin {
        background: #0077b5;
    }

    .icon--linkedin:hover {
        background: #005582;
    }

    .icon--linkedin:before {
        content: "\e929";
    }

    .app-wh {
        width: 120px;
        height: 35px;
        margin-right: 3px;
    }
}

.container--footer:after,
.container--footer:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    background: #2e2e2e;
    width: 50vw
}

.container--footer:before {
    left: 50%
}

.container--footer:after {
    right: 50%
}

.container--footer .group,
.container--footer .list {
    width: auto
}

.container--footer .btn--top {
    position: absolute;
    top: -23px;
    right: 10px;
    z-index: 7;
    display: block;
    width: 140px
}

.words {
    color: #c3c3c3;
}

.words:hover {
    color: #fff;
}

.container--footer .btn--top:after {
    font: 400 .625rem icons;
    content: "\e909";
    margin-left: 5px
}

.container--footer .btn--top:hover {
    background: #3c953c;
    cursor: pointer
}

.container--footer .screen-reader-text {
    color: #fff
}

.container--footer :focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    outline-style: dashed
}

.logo--footer {
    width: 170px;
    display: block;
    margin-bottom: 5px
}
</style>